<template>
    <div class="home-container">
        <el-card class="box-card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全年日历" name="year">
                <v-date-picker
                    :value="date"
                    :min-date="date"
                    is24hr
                    mode="dateTime"
                    :attributes='attrs'
                    :columns="layout.columns"
                    :rows="layout.rows"
                    :is-expanded="layout.isExpanded"/>
            </el-tab-pane>
            <el-tab-pane label="本月日历" name="month">
                <v-date-picker
                    :value="date"
                    :min-date="date"
                    :attributes='attrs'
                    is24hr
                    mode="dateTime"
                    is-expanded/>
            </el-tab-pane>
        </el-tabs>
        </el-card>
    </div>
</template>

<script>
    /* npm install v-calendar --save */
    import Vue from 'vue'
    import VCalendar from 'v-calendar'

    Vue.use(VCalendar, {
        componentPrefix: 'v'
    });

    export default {
        name: "HomeIndex",
        components:{VCalendar},
        data() {
            return {
                activeName: 'month',
                date: new Date(),
                attrs: [
                    {
                        key: 'today',
                        highlight: true,
                        dates: new Date(),
                    },
                ]
            }
        },
        computed: {
            layout() {
                return this.$screens(
                    {
                        // Default layout for mobile
                        default: {
                            columns: 2,
                            rows: 6,
                            isExpanded: true,
                        },
                        // Override for large screens
                        lg: {
                            columns: 4,
                            rows: 3,
                            isExpanded: false,
                        },
                    },
                );
            }
        },
        created() {
            this.name = window.localStorage.getItem(window.localStorage.getItem("ww-token"))
        },
        methods: {
            handleClick() {

            }
        }
    }
</script>

<style scoped>

</style>
